<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui表格加分页测试</title>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <link rel="stylesheet"  href="../layui/css/layui.css" media="all">
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script>
    layui.use('table', function(){//引入table模块
        var table = layui.table
        ,form = layui.form;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 'full-0'//注释掉随浏览器高度自适应
            ,width : 600
            ,cellMinWidth: 100//列宽
            ,skin:'nob'//表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
            ,even: true    //隔行换色
            ,url: '/DataShow' //数据接口
            ,page: true //开启分页
            ,limits:[10,20,30]//每页的数据选择项
            ,limit:10 //每页默认显示的数量
            ,method:'get'  //提交方式
            // ,size: 'lg' //小尺寸的表格
            ,done: function(res, curr, count){
                console.log(res);
                //得到当前页码
                console.log(curr);
                //得到数据总量
                console.log(count);
            }
            ,
            //将获取到的数据解析为table组件所规定的数据格式
            parseData:function (res) {//res为返回的原始数据
                console.log(res);
                return{
                    "code":0//解析接口状态
                    ,"msg":""//解析提示的文本信息
                    ,"count": res.ct//数据的总条数
                    ,"data":res.data//数据的列表
                }
            },
        cols: [[ //表头
            {type:'checkbox'},
            {field: 'chinese'//json数据对应的key
                , title: '城市名称'//表头名
                , width:80//宽度
                , sort: true//是否开启排序 默认为false
                ,width:300

            }
            ,{field: 'adcode'
                , title: '城市编号'
                , width:80
                , sort: true//是否开启排序 默认为false
                ,width:300
            }
        ]]
        });
    });
</script>
</body>
</html>
